<template>

  <div class="common-layout">
    <el-container>
      <el-aside width="20vw">
        <div style=" border: 1px solid #000;
         min-height: 40vh;
         padding: 15px;
         background: #ffffff;
         opacity: 0.8">
          <ArticleAuthorCard
              :uid = "uid"
              :create-time = "createTime"
              :user-avatar = "userAvatar"
              :user-name = "userName"
              :user-profile = "userProfile"
              :user-role = "userRole"
          />
        </div>

      </el-aside>

      <el-main>
        <div style=" border: 1px solid #000;
        min-height: 40vh;
        padding: 15px;
        background: #ffffff;
        opacity: 0.9">
          <el-text style="font-size: medium">
            {{content}}
          </el-text>

          <div style="margin-top: 1vh">
            <el-text> 发送时间{{postTime}}</el-text>
          </div>
          <div>
            <el-divider content-position="left">
              <div style="display: flex; flex-direction: column"></div>
              <el-text style="">签名</el-text>
            </el-divider>
            <div>
              <el-text v-if="userProfile==null">
                这个人很懒，还没有写简介喔
              </el-text>
              <el-text v-else>
                {{userProfile}}
              </el-text>
            </div>
          </div>
        </div>

        <el-affix :offset="10">
          <el-button v-if="props.helpMoney !==0 && props.authorUid===props.currentUserUid"
                     color="#FFD700"
                     @click="selectThisComment">
            选用此评论
          </el-button>
        </el-affix>
      </el-main>
    </el-container>
    <el-divider/>
  </div>

</template>

<script setup>

import ArticleAuthorCard from "@/components/article/ArticleAuthorCard.vue";
import {getWithToken} from "@/net/postAndGetMethodWithToken";
import {ref, watch} from "vue";
import {postWithToken} from "@/net/postAndGetMethodWithToken";
import {ElMessage} from "element-plus";

const props = defineProps(["uid","content","postTime","helpMoney","authorUid","currentUserUid","currentArticleId"])

const createTime =ref()
const userAvatar =ref()
const userName =ref()
const userProfile =ref()
const userRole =ref()
const articleId = ref()

watch(props, (newValue, oldValue) => {
  if (newValue) {
    articleId.value = newValue.currentArticleId
  }
})


getWithToken(`/api/user/one?uid=${props.uid}`,
    (data,code,message) =>{
      createTime.value =data.createTime
      userAvatar.value =data.userAvatar
      userName.value =data.userName
      userProfile.value =data.userProfile
      userRole.value =data.userRole
})

const selectThisComment= () => {
  postWithToken(`/api/reward/delete?articleId=${articleId.value}`,null,() => {
    ElMessage.success("成功!")
    location.reload()
  },() => { return false})
}
</script>


<style scoped>

</style>
